$(function(){
    var $sliderContainer = $('.slider-container'),
        $sliderImg = $('.slider-img'),
        $sliderImgLi = $('li', $sliderImg),
        $sliderBtn = $('.slider-btn'),
        $ul = $('.pic-show'),
        //imgWidth =  $sliderImgLi.eq(0).width(),
        imgWidth = 300,
            index = 0,
        timer = null;

    $sliderImg.append($sliderImgLi.eq(0).clone())
        .width(($sliderImgLi.length+1) * imgWidth);

    var sBtns = "";
    for(var i=0; i<$sliderImgLi.length; i++){
        sBtns += '<li></li>';
    }
    $sliderBtn.append(sBtns);

    var $sliderBtnLi = $('li', $sliderBtn);
    $sliderBtnLi.eq(0).addClass('active');

    $sliderBtn.on('mouseover', 'li', function(){
        index = $(this).index();
        switchImg(index);
    });

    $sliderContainer.hover(function(){
        clearInterval(timer);
    }, function(){
        start();
    });

    function start(){
        timer = setInterval(function(){
            if(index == $sliderImgLi.length){
                $sliderImg.css('left', 0);
                index = 0;
            }
            index++;
            switchImg(index);

        }, 3000);
    }

    start();


    function switchImg(index){
        for(var i=0; i<$sliderBtnLi.length; i++){
            $sliderBtnLi.eq(i).removeClass('active');
        }
        $sliderBtnLi.eq(index==4?0:index).addClass('active');
        $sliderImg.animate({
            left: -imgWidth*index
        }, 500);
    }

    $('.slider .left').on('click',function(){
        if(index == 0){
            index = 3;
        }
        index--;
        switchImg(index);
    });

    $('.slider .right').on('click',function(){
        index++;
        if(index == 4){
            index = 0;
        }
        switchImg(index);
    });



    $(".service .hidden li").click(function(){
        $(this).css("opacity","1").siblings().css("opacity","0");
    })
});